<template>
    <el-form :model="settingsForm" status-icon :rules="rules" ref="settingsForm"
             label-width="150px"
             style="margin-top: 30px;color: #1f2d3d;">
        <el-form-item class="form-label" label="IP地址" prop="url">
            <el-col :span="19">
                <el-input v-model="settingsForm.url" placeholder="IP地址"
                          maxlength="11" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item class="form-label" label="端口" prop="port">
            <el-col :span="19">
                <el-input v-model="settingsForm.port" placeholder="端口"
                          maxlength="11" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item class="form-label" label="用户名" prop="username">
            <el-col :span="19">
                <el-input v-model="settingsForm.username" placeholder="用户名"
                          maxlength="11" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item class="form-label" label="密码" prop="password">
            <el-col :span="19">
                <el-input v-model="settingsForm.password" placeholder="密码"
                          maxlength="11" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="19">
                <el-button @click="submitForm" type="success" style="width: 100%">更新</el-button>
            </el-col>
        </el-form-item>
    </el-form>
</template>

<script>
    import qs from 'qs';

    export default {
        name: "SettingsForm",
        data() {
            return {
                settingsForm: {
                    url: '',
                    port: '',
                    username: '',
                    password: ''
                },
                rules: {
                    url: [],
                    port: [],
                    username: [],
                    password: []
                }
            }
        },
        mounted() {
        },
        props: {},
        methods: {
            to(path) {
                this.$router.push({name: path});
            },
            submitForm() {
                if (this.id !== -1) {
                    this.wPoolForm.id = this.id;
                    axios.post("/bjdzms/waterPoolData/upd",
                        qs.stringify(this.wPoolForm)
                    ).then(res => {
                        this.$emit('updateData');
                    });
                } else {
                    this.wPoolForm.sid = this.sid;
                    axios.post("/bjdzms/waterPoolData/add",
                        qs.stringify(this.wPoolForm)
                    ).then(res => {
                        this.$emit('updateData');
                    });
                }
            }
        }
    }
</script>

<style>
    .el-upload-dragger {
        height: 40px !important;
    }
</style>

<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .el-form-item {
        width: 610px;
    }
</style>
